<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Beehive</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
</head>
<body>

<div class="container-fluid">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a th:href="@{/admin}" style="text-decoration: none">首页</a></li>
            <li class="breadcrumb-item"><a href="#" style="text-decoration: none">用户管理</a></li>
            <li class="breadcrumb-item active" aria-current="page">头像列表</li>
        </ol>
    </nav>


    <button class="btn btn-primary btn-sm" style="position: absolute; top: 8px; right: 24px" id="uploadBtn">
        <span class="badge badge-light">❤</span>&ensp;上传&ensp;
    </button>

    <div class="row">
        <div class="col-2"  th:each="headImg : ${list.records}" style="max-width: 16.5%">
            <div>
                <img th:src="${#strings.replace(headImg.src, 'd:/bms/book', '/path')}"
                     width="200px" height="200px" class="rounded" th:title="${headImg.src} + ' ' + ${headImg.uploadTime}">
            </div>
            <div style="color: #e84a5f; margin-bottom: 20px; margin-top: 10px;">
                <span>使用人数：</span>
                <span>[[${headImg.userNum}]]</span>
            </div>
        </div>
    </div>
    <hr/>

    <div>
        <!-- 分页组件 -->
        <nav aria-label="Page navigation example" style="display: inline-block; float:right;">
            <ul class="pagination">
                <li class="page-item">
                    <a class="page-link" th:href="@{/admin/headImgList(pageNum=${list.current} - 1)}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                        <span class="sr-only">Previous</span>
                    </a>
                </li>
                <li th:class="${num == list.current?'page-item active':'page-item'}"
                    th:each="num : ${#numbers.sequence(list.current, list.current + 2)}">
                    <a class="page-link" th:href="@{/admin/headImgList(pageNum=${num})}">[[${num}]]</a>
                </li>
                <li class="page-item">
                    <a class="page-link" th:href="@{/admin/headImgList(pageNum=${list.current} + 1)}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                        <span class="sr-only">Next</span>
                    </a>
                </li>
            </ul>
        </nav>

        <span style="float:left; margin-top: 4px; color: #ff8c94">
            当前第 [[${list.current}]] 页 总计 [[${list.pages}]] 页 共 [[${list.total}]] 条
        </span>

    </div>
</div>

<script>
    layui.use(['upload', 'layer'], function(){
        let upload = layui.upload;
        let layer = layui.layer;

        //执行实例
        let uploadInst  = upload.render({
            elem: '#uploadBtn' //绑定元素
            ,url: '/headImg/upload' //上传接口
            ,accept: 'jpg|png' // 允许的格式
            ,size: 500 // 最大500KB
            ,done: function(res){
                console.log(res);
                if (res !== 0) {
                    layer.msg('头像上传成功！', {icon: 1});
                } else {
                    layer.msg('头像上传失败，请稍后再试！', {icon: 0});
                }
            }
            ,error: function(){
                layer.msg('服务器开小差啦！！', {icon: 2, anim: 6});
            }
        });
    });
</script>

</body>
</html>